﻿@model HMoPro.Models.CreateResource

@{
    ViewBag.Title = "ManageCreate";
}
@section Scripts {

    @Scripts.Render("~/bundles/zTree_v3")
}
     @Styles.Render("~/zTree_v3/css")

<script type="text/javascript">

        var treeid;
        var treename;
        var arrayobj = new Array();
        var cancelid;
        $(document).ready(function () {
            $.ajax({
                type: "Get",
                url: "@Url.Action("getmenu","Category")",
                async: false,
                cache: false,
                success: function (data) {
                    tree = $.fn.zTree.init($("#treeDemo"), setting, data);
                    tree.expandAll(true);
                }
            });
        })
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: zTreeOnClick
            }
        };

        function zTreeOnClick(event, treeId, treeNode) {
            treeid = treeNode.id;
            treename = treeNode.name;

        }


</script>

<script>
        Array.prototype.removearray = function (dx) {
            if (isNaN(dx) || dx > this.length) { return false; }
            for (var i = 0, n = 0; i < this.length; i++) {
                if (this[i] != this[dx]) {
                    this[n++] = this[i]
                }
            }
            this.length -= 1
        }

        function checkRepeat(coutreeid, arr) {

            for (var i = 0; i < arrayobj.length; i++) {
                if (arrayobj[i][0] == treeid)
                    return false;
            }
            return true;
        }

        function cancel(obj) {
            cancelid = obj.id;
            // this.style.color = "red";
            //   $("#categorylist").remove(obj.id);
        }

        $(function () {

            $('#titleerror').hide();
            $('#describeerror').hide();
            $('#categoryerror').hide();
            $('button#add2').bind("click", function () {

                if (checkRepeat(treeid, arrayobj) && treeid != undefined) {
                    arrayobj.push([treeid, treename]);
                    // for (var i = 0; i < arrayobj.length; i++) {
                    var node = "<a href=" + "#" + " id=" + "\"" + treeid + "\"" + "onclick=" + "\"" + "cancel(this);return false;" + "\"" + ">" + treename + "</a><br>"
                    //     }
                }
                $("#categorylist").append(node);
                //      document.getElementById("Ulcategorylist").appendChild(node);
                //$.ajax({
                //    type: "POST",
                //    url: "/Resource/AddCategory",
                //    data: { "treeid": treeid},
                //      success: function (data) {
                //          $("#categorylist").html(data);
                //        }
                //    })

            })



            $('button#cancel').bind("click", function () {

                var removeid;
                for (var i = 0; i < arrayobj.length; i++) {
                    if (arrayobj[i][0] == cancelid) {
                        removeid = i;
                        break;
                    }
                }
                arrayobj.removearray(removeid);
                var nodestring = "";
                for (var i = 0; i < arrayobj.length; i++) {
                    var node = "<a href=" + "#" + " id=" + "\"" + arrayobj[i][0] + "\"" + "onclick=" + "\"" + "cancel(this);return false;" + "\"" + ">" + arrayobj[i][1] + "</a><br>"
                    nodestring += node;
                }
                document.getElementById("categorylist").innerHTML = nodestring;


                //   var child = document.getElementById(cancelid);
                //   child.parentNode.removeChild(child);
            })

            $('#title').bind("blur", function (event) {
                ziptitle = $("#title").val().trim();
                if (ziptitle.length < 1) {
                    $('#titleerror').show();
                    event.preventDefault();
                    return false;
                } else {
                    $('#titleerror').hide();
                    return true;
                }
            })

            $('#describe').bind("blur", function (event) {
                ziptitle = $("#describe").val().trim();
                if (ziptitle.length < 1) {
                    $('#describeerror').show();
                    event.preventDefault();
                    return false;
                } else {
                    $('#describeerror').hide();
                    return true;
                }
            })




            $('#submitid').bind("click", function (event) {
                var _list = [];
                // var title1 = $("#title").val();
                var title = $("#title").val().trim();
                var describe = $("#describe").val().trim();
                var location = $("#location").val().trim();
                if (title.length < 1) {
                    $('#titleerror').show();
                    event.preventDefault();
                    return false;
                }
                if (describe.length < 1) {
                    $('#describeerror').show();
                    event.preventDefault();
                    return false;
                }
                if (arrayobj.length < 1) {
                    $('#categoryerror').show();
                    event.preventDefault();
                    return false;
                }
                $('#titleerror').hide();
                $('#describeerror').hide();
                $('#categoryerror').hide();
                for (var i = 0; i < arrayobj.length; i++) {
                    _list[i] = arrayobj[i][0];

                }
                $.ajax({
                    url: "@Url.Action("ManageCreateComfirm")",
                    data: { "selectedIDs": _list, "title": title, "describe": describe, "location": location },
                    //data: _list,
                    dataType: "json",
                    type: "POST",
                    traditional: true,
                    success: function (data) {
                        // your logic
                        if (data.Success == true)
                            window.location.href = "@Url.Action("CreateUploadFile")" + "?title=" + title;
                        else {

                            $('#titleerror').html(data.Message);
                            $('#titleerror').show();
                        }

                    }
                });

                //   var child = document.getElementById(cancelid);
                //   child.parentNode.removeChild(child);


            })



        });


</script>

<style>
    body, h1, h2, h3, h4, h5, h6, small, .button {
        font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif !important;
    }

    h3, .h3 {
        font-size: 24px;
    }

    h1, .h1, h2, .h2, h3, .h3 {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: inherit;
        font-weight: 500;
        line-height: 1.1;
        color: inherit;
    }

    .form-horizontal .control-label {
        padding-top: 3px;
    }

    .form-horizontal .text-box {
        width: 300px;
        padding-left: 3px;
    }

    #categorylist a {
        display: inline-block;
        margin-top: 2px;
        padding-top: 1px;
        text-decoration: none;
    }

        #categorylist a:hover {
            text-decoration: underline;
        }
</style>

<div id="main">
    <h3>新建资源 - STEP 1</h3>

    @using (Html.BeginForm("ManageCreateComfirm","Resource", FormMethod.Post, new { @role = "form", @class = "form-horizontal" }))
    { 
     @Html.ValidationSummary(true)
    <div class="form-group">
        <div class="col-xs-2 control-label">
            @Html.LabelFor(model => model.title)
        </div>
        <div class="col-xs-10">
            @Html.EditorFor(model => model.title)
        </div>
        <div class="col-xs-offset-2 col-xs-10 text-danger">

            <div id="titleerror">标题不能为空</div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-2 control-label">
            @Html.LabelFor(model => model.subtitle)
        </div>
        <div class="col-xs-10">
            @Html.EditorFor(model => model.subtitle)
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-2 control-label">
            @Html.LabelFor(model => model.describe)
        </div>
        <div class="col-xs-10">
            @Html.EditorFor(model => model.describe, new { @class = "form-control" })
        </div>
        <div class="col-xs-offset-2 col-xs-10 text-danger">
            <div id="describeerror">描述不能为空</div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-2 control-label">
            @Html.LabelFor(model => model.location)
        </div>
        <div class="col-xs-10">
            @Html.EditorFor(model => model.location, new { @class = "form-control" })
        </div>
        <div class="col-xs-offset-2 col-xs-10 text-danger">
            @Html.ValidationMessageFor(model => model.location)
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-2 control-label">
            类别
        </div>
        <div id="categoryerror">请添加类别！</div>
        <div class="col-xs-3">
            <div id="categorylist">
            </div>
        </div>
        <div class="col-xs-1" style="padding-top:120px;">
            <p style="margin-bottom:10px;"><button type="button" id="add2" class="button button-plain button-highlight button-small"><<</button></p>
            <p><button type="button" id="cancel" class="button button-small">>></button></p>
        </div>
        <div class="col-xs-4 col-xs-offset-1">
            <ul id="treeDemo" class="ztree" style="width:100%"></ul>
        </div>
    </div>

    @*<div class="editor-label">
             @Html.LabelFor(model => model.title)
         </div>
         <div class="editor-field">
             @Html.EditorFor(model => model.title)
             @Html.ValidationMessageFor(model => model.title)

         </div>

         <div class="editor-label">
             @Html.LabelFor(model => model.describe)
         </div>
         <div class="editor-field">
             @Html.EditorFor(model => model.describe)
             @Html.ValidationMessageFor(model => model.describe)
             <div id="describeerror">描述不能为空</div>
         </div>

         <div class="editor-label">
             @Html.LabelFor(model => model.category)
         </div>
         <div id="categoryerror">请添加类别！</div>
         <div>
             <div>
                 <ul id="treeDemo" class="ztree"></ul>
             </div>
             <div>
                 <button type="button" id="add">>></button>
                 <button type="button" id="cancel"><<</button>
             </div>

             @*  <div  id="categorylist" style="width:75px;height:100px">
             <div id="categorylist">

             </div>
             @*         </div>
         </div>
         <div class="editor-label">
             @Html.LabelFor(model => model.location)
         </div>
         <div class="editor-field">
             @Html.EditorFor(model => model.location)
             @Html.ValidationMessageFor(model => model.location)
        </div> <p>
             <input type="submit" id="submitid" value="下一步" />
         </p>

    *@



    }
    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            @Html.Hidden("resourceid", ViewData["resourceid"])
            <button id="submitid" class="button button-raised button-caution button-pill">下一步</button>
        </div>
    </div>

    @*<div>
            @Html.ActionLink("返回", "Index")
        </div>*@
</div>

    <script>
        $("#carousel-hm").css("display", "none");
        $("#f2 a").html("<font> " + $("#f2 a").text() + " </font>")
        $("#f2 a").addClass("selected");
    </script>
